<!DOCTYPE html>
<html lang="en">
<head>
  {{ partial "head.html" . }}
  {{ partial "styles.html" . }}
</head>
<body>
  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-overlay"></div>
    <div class="container">
      <div class="hero-content">
        <img src="/img/app-icon1.png" alt="{{ .Site.Params.app_name }} Icon" class="app-icon">
        <h1>{{ .Params.hero_title | default .Site.Params.hero_title }}</h1>
        <p>{{ .Params.hero_subtitle | default .Site.Params.hero_subtitle }}</p>
        <div class="download-buttons">
          <a href="{{ .Site.Params.ios_download }}" class="btn-download ios">
            <i class="fab fa-apple"></i> Download for iOS
          </a>
          <a href="{{ .Site.Params.android_download }}" class="btn-download android">
            <i class="fab fa-google-play"></i> Download for Android
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section class="features">
    <div class="container">
      <h2>Why Choose {{ .Site.Params.app_name }}</h2>
      <div class="features-grid">
        {{ range .Params.features }}
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-{{ .icon }}"></i>
          </div>
          <h3>{{ .title }}</h3>
          <p>{{ .description }}</p>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <!-- App Preview Section -->
  <section class="app-preview">
    <div class="container">
      <div class="preview-content">
        <div class="preview-text">
          <h2>Beautiful Interface</h2>
          <p>Experience music like never before with our sleek, user-friendly interface designed for music lovers.</p>
          <div class="download-buttons">
            <a href="{{ .Site.Params.ios_download }}" class="btn-download ios">
              <i class="fab fa-apple"></i> App Store
            </a>
            <a href="{{ .Site.Params.android_download }}" class="btn-download android">
              <i class="fab fa-google-play"></i> Google Play
            </a>
          </div>
        </div>
        <div class="preview-image">
          <img src="/img/screenshot.png" alt="{{ .Params.screenshot_alt }}">
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="testimonials">
    <div class="container">
      <h2>What Our Users Say</h2>
      <div class="testimonials-grid">
        {{ range .Params.testimonials }}
        <div class="testimonial-card">
          <p>"{{ .quote }}"</p>
          <span>- {{ .author }}</span>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta">
    <div class="container">
      <h2>Ready to Start Listening?</h2>
      <p>Download {{ .Site.Params.app_name }} now and enjoy unlimited music.</p>
      <div class="download-buttons">
        <a href="{{ .Site.Params.ios_download }}" class="btn-download ios">
          <i class="fab fa-apple"></i> Download for iOS
        </a>
        <a href="{{ .Site.Params.android_download }}" class="btn-download android">
          <i class="fab fa-google-play"></i> Download for Android
        </a>
      </div>
    </div>
  </section>

  {{ partial "footer.html" . }}
  <script src="/js/app.js"></script>
</body>
</html>